<template>
    <teleport :to='teleport' v-if="show">
        <div :class="`dailogShade ${class_name}` " @click="onclick">
            <div class="dgMainBox animated fadeInDown" :style="{'max-height':maxHeight,'max-width':maxWidth,width,height}">
                <div class="dg-header"><slot name="header"/></div>
                <div class="dg-main">
                    <i v-if="showtopclose" class="close iconfont icon-guanbi" @click="close"></i>
                    <slot/>
                </div>
                <div class="dg-footer"><slot name="footer"/></div>
            </div>
        </div>
    </teleport>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
export default {
    props:{
        show:Boolean,
        closeOnClickOverlay:{  // 点击遮罩层是否关闭弹窗
            type:Boolean,
            default:false
        },
        teleport:{
            type:String,
            default:()=>'body'
        },
        width:{
            type:String,
            default:'85%'
        },
        height:{
            type:String
        },
        maxHeight:{
            type:String
        },
        maxWidth:{
            type:String 
        },
        showtopclose:{
            type:Boolean,
            default:false
        },
        styleType:{
            type:Number,
            default:1   // 默认弹窗样式
        }
    },
    emits:{  // teleport后，出发事件需要emits申明（vue3+）
        'close':null,
        'update:show':null
    },
    setup(props,context) {
        const state = reactive({
            class_name:''
        })

        onMounted(()=>{
            if(props.styleType){
                if(props.styleType==10){
                    state.class_name = 'dg-public-warp'
                }else{
                    state.class_name = `dailog${props.styleType}`
                }
            }
        })
        const close = ()=>{
           context.emit('update:show', false)
           context.emit('close', false)
        }

        const onclick = ()=>{
            props.closeOnClickOverlay && close()
        }

        return{
            ...toRefs(state),
            close,
            onclick
        }
    },
}
</script>

<style lang="scss" scoped>
    .dailogShade{
        display: flex;
        justify-content: center; 
        align-items: center;    
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.5);
        .dgMainBox{
            display: flex;
            flex-flow: column;
            width: 80%;
            min-height: 100px;
            max-height: 90%;
            background: #00317A;
            border: 2px solid #67F8FF;
            padding: 30px;
            border-radius: 20px;
            position: relative;
            z-index: 200;
            .dg-main{
                flex: 1;
                overflow: hidden;
                overflow-y: auto;
                .close{
                    position: absolute;
                    z-index: 200;
                    font-size: 40px;
                    color: #67F8FF;
                    right: 30px;
                    top: 20px;
                }
            }
        }
        &.dailog2{
            .dgMainBox{
                border: 0;
                background: url(/images/bd.png) left top no-repeat;
                background-size: 100% 100%;
                width: 700px !important;
                height: 600px;
                border-radius: 0;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 40px;
                       top: 30px;
                    }
                }
            }
        }
        &.dailog3{
            .dgMainBox{
                border: 0;
                background: url(/images/dgbg3.png) left top no-repeat;
                background-size: 100% 100%;
                width: 900px !important;
                height: 90%;
                border-radius: 0;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 40px;
                       top: 30px;
                    }
                }
            }
        }
        &.dailog4{
            .dgMainBox{
                border: 0;
                border-radius: 0;
                background: url(/images/dgbg4.png) left top no-repeat;
                background-size: 100% 100%;
            }
            
        }
        &.dailog5{
            padding: 30px 30px 30px 105px;
            .dgMainBox{
                border: 0;
                border-radius: 0;
                background: none;
                width: 100%!important;
                height: 100%;
                overflow: hidden;
                max-height: 100%;
                padding: 30px;
                background: url(/images/bigdg2.png) left top no-repeat;
                background-size: 100% 100%;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 40px;
                       top: 30px;
                    }
                }
            }
            
        }
        &.dailog6{
            .dgMainBox{
                border: 0;
                background: url(/images/adset/set2.png) left top no-repeat;
                background-size: 100% 100%;
                width: 900px !important;
                border-radius: 0;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 40px;
                       top: 30px;
                    }
                }
            }
        }
        &.dailog7{
            .dgMainBox{
                border: 0;
                background: url(/images/adset/set3.png) left top no-repeat;
                background-size: 100% 100%;
                width: auto !important;
                border-radius: 0;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 40px;
                       top: 30px;
                    }
                }
            }
        }
        &.dailog8{
            .dgMainBox{
                border: 0;
                background: url(/images/wcdg.png) left top no-repeat;
                background-size: 100% 100%;
                //width: 80% !important;
                height: 90%;
                border-radius: 0;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 40px;
                       top: 30px;
                    }
                }
            }
        }
        &.dailog9{
            .dgMainBox{
                border: 0;
                border-radius: 0;
                background: url(/images/dgbg9.png) left top no-repeat;
                background-size: 100% 100%;
                width: auto !important;
                min-width: 500px;
                min-height:400px;
            }
            
        }
        &.dailog11{
            .dgMainBox{
                border: 0;
                border-radius: 0;
                background: url(/images/dgbg11.png) left top no-repeat;
                background-size: 100% 100%;
                width: 760px !important;
                height:400px;
            }
            
        }
        &.dailog20{
            .dgMainBox{
                display: block;
                border: 0;
                width: auto !important;
                height: auto;
                border-radius: 0;
                padding: 0;
                background: none;
                max-height:none!important;
                .dg-main{
                    .close{
                       font-size: 42px;
                       font-weight: bold; 
                       right: 32px;
                       top: 22px;
                    }
                }
            }
        }

        &.dg-public-warp{
            .dgMainBox{
                border: 0;
                border-radius: 0;
                background: none;
                width: 100%!important;
                height: 100%;
                overflow: hidden;
                max-height: 100%;
                padding: 0;
            }
        }
    }

    // ---animated---------------------
    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }
    
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-20px);
            transform: translateY(-20px)
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
            transform: translateY(-20px)
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0)
        }
    }
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown
    }
</style>